<div class="p-2">
  {{ 'PAC.MENU.HOME.Recents' | translate: {Default: "Recents"} }}
</div>
<div class="px-2 flex-1 overflow-auto">
  @for (recent of recents$ | async; track $index) {
    <div class="p-1 rounded-md text-ellipsis whitespace-nowrap overflow-hidden flex hover:bg-gray-100/50 dark:hover:bg-white/5">
      @switch (recent.entity) {
        @case('SemanticModel') {
          <span class="font-notoColorEmoji">🧊</span>
          <a [routerLink]="['/models', recent.entityId]" class="ml-1 text-ellipsis overflow-hidden">{{recent.entityName}}</a>
        }
        @case('Story') {
          <span class="font-notoColorEmoji">📖</span>
          <a [routerLink]="['/story', recent.entityId]" class="ml-1 text-ellipsis overflow-hidden">{{recent.entityName}}</a>
        }
      }

        <span style="flex: 1;"></span>
        
        <span class="visit-at">
          {{recent.updatedAt}}
        </span>
    </div>
  }
</div>
